<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>出库查询</title>
    <link rel="stylesheet" href="../css/productionPlanRegistrationCss.css">

    <link rel="stylesheet" href="../static/css/style.css">

    <script src="../js/jquery-2.1.1.min.js"></script>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../static/js/global.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.0/locale/bootstrap-table-zh-CN.js"></script>
    <script>
        //渲染表格
        $(function () {
            $('#table').bootstrapTable({
                //请求方式  get请求中文会乱码，建议使用post请求
                method: 'post',
                //请求头部的设置
                contentType: 'application/json',
                //路径
                url: '/hj/queryOutWarehouse.action',
                //设置交替行样式
                striped: true,
                //初始显示页号
                pageNumber: 1,
                //设置表格高度
                height: 600,
                //是否显示分页
                pagination: true,
                //设置是服务端分页还是客户端分页
                sidePagination: 'server',
                //页大小
                pageSize:6,
                //分页列表
                pageList:[6,12],
                //上传到服务端的参数
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNum: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,

                    };
                },
                // 定义列名
                columns: [
                    {title: '出库单编号', field: 'payId', align: 'center',formatter: function (value,row,index){
                        return "<a href='#' data-toggle=\"modal\" data-target=\"#myModal1\" onclick='showData("+JSON.stringify(row)+")'>"+value+"</a>"
                        }
                    },
                    {title: '出库理由', field: 'reason', align: 'center'},
                    {title: '完成时间', field: 'dateTime', align: 'center',formatter(value,row,index){
                        if(value==null){
                            return "未完成"
                        }else{
                            return value;
                        }
                        }},
                    {title: '应出库总件数', field: 'amountSum', align: 'center'},
                    {title: '已出库总件数', field: 'paidAmountSum', align: 'center'},
                    {title: '出库单状态', field: 'checkTag', align: 'center',
                        formatter: function (value,row,index) {
                        if(row.paidAmountSum=="0"){
                            return "<span class=\"badge badge-warning\"><font>等待</font><span class=\"ms-1 fas fa-stream\"></span></span>";
                        }else{
                            if(row.paidAmountSum==row.amountSum){
                                return "<span class=\"badge badge-success\"><font >完成</font><span class=\"ms-1 fa fa-check\"></span></span>";
                            }else{
                                return "<span class=\"badge badge-danger\"><font >执行</font><span class=\"ms-1 fa fa-redo\"></span></span>";

                            }
                        }
                        },
                    }
                ]
            });
        })
        function showData(obj){
            $('.payId').val(obj.payId);//出库单编号
            $('#reason').val(obj.reason);//出库理由
            $('#amountSum').val(obj.amountSum);//应出库总件数
            $('#paidAmountSum').val(obj.paidAmountSum);//已出库总件数
            $('#costPriceSum').val(obj.costPriceSum);//应出库总金额
            $('#checker').val(obj.checker);//登记人
            $('#checkTime').val(obj.checkTime);//登记时间
            $.ajax({
                type:'POST',
                url:'/hj/queryOutboundDeliveryOrder.action',
                data:'id='+obj.id,
                success:function (SPayDetailsView){
                    $('#tbodyModal').html("");
                    $('#outAmountTotal').val(SPayDetailsView.outMoneyTotal.outAmountTotal);//已出库总件数
                    $('#outMoneyTotal').val(SPayDetailsView.outMoneyTotal.outMoneyTotal);//已出库总金额
                    list = SPayDetailsView.sPayDetailsVos;
                    $.each(SPayDetailsView.sPayDetailsVos,function (index,SPayDetail){
                        $('#tbodyModal').append("<tr class='tr'>" +
                            "<td>"+SPayDetail.product_id+"</td>" +
                            "<td>"+SPayDetail.product_name+"</td>" +
                            "<td>成品库</td>" +
                            "<td>"+SPayDetail.cost_price+"</td>" +
                            "<td>"+SPayDetail.amount+"</td>" +
                            "<td>"+SPayDetail.paid_amount+"</td>" +
                            "<td>"+(SPayDetail.amount*SPayDetail.cost_price)+"</td>" +
                            "<td>"+(SPayDetail.paid_amount*SPayDetail.cost_price)+"</td>" +
                            "<td class='td'><button class=\"btn btn-info\" onclick='productDetails("+JSON.stringify(SPayDetail)+")'>查看</button></td>" +
                            "</tr>")
                    });
                    $('#myModal').modal("show");
                }
            })
        }
        //查看产品明细
        function productDetails(SPayDetail){
            $("#tbodyModal1").html("");
            $('#productId').val(SPayDetail.product_id);//产品编号
            $('#productName').val(SPayDetail.product_name);//产品名称
            $('#costPrice').val(SPayDetail.cost_price);//产品编号
            $.ajax({
                type:'POST',
                url:'/hj/queryWarehouseDetailById.action',
                data:'id='+SPayDetail.id,
                success:function (resultSPayDetails){
                    $.each(resultSPayDetails,function (index,SPayDetails){
                        $("#tbodyModal1").append("<tr>" +
                                "<td>"+SPayDetails.id+"</td>" +
                                "<td>成品库</td>" +
                                "<td>01-01-01</td>" +
                                "<td>"+SPayDetails.dateTime+"</td>" +
                                "<td>"+SPayDetails.paidAmount+"</td>" +
                                "<td>"+SPayDetails.subtotal+"</td>" +
                            "</tr>>");
                    })
                    $('#myModal2').modal("show");
                }
            })
        }
    </script>
</head>
<body>
    <table id="table"></table>
    <div class="modal fade" id="myModal1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="card-title">reviewProductionPlan</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="d1">
                        <div style="margin-top: 10px"><h2>出库单</h2>

                        </div>
                        <div class="container-fluid row" style="margin-top: 10px">
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">出库单编号<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control payId" style="background-color: white" readonly>
                            </div>

                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">出库理由<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="reason" style="background-color: white" readonly>
                            </div>
                        </div>

                        <div class="container-fluid row">
                            <table class="table table-bordered" style="text-align: center">
                                <thead>
                                <tr>
                                    <th>产品编号</th>
                                    <th>产品名称</th>
                                    <th>库房名称</th>
                                    <th>单价（￥）</th>
                                    <th>应出库数量</th>
                                    <th>已出库数量</th>
                                    <th>应出库小计（￥）</th>
                                    <th>已出库小计（￥）</th>
                                    <th>查看</th>
                                </tr>
                                </thead>
                                <tbody id="tbodyModal">


                                </tbody>
                            </table>
                        </div>

                        <div class="container-fluid row">
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">应出库总件数<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="amountSum" style="background-color: white" readonly>
                            </div>
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">已出库总件数<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="outAmountTotal" style="background-color: white" readonly>
                            </div>
                        </div>

                        <div class="container-fluid row">
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">应出库总金额<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="costPriceSum" style="background-color: white" readonly>
                            </div>
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">已出库总金额<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="outMoneyTotal" style="background-color: white" readonly>
                            </div>
                        </div>

                        <div class="container-fluid row">
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">复核人<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="checker" style="background-color: white" readonly>
                            </div>
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">复核时间<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="checkTime" style="background-color: white" readonly>
                            </div>
                        </div>

                        <div class="col" style="margin-bottom: 10px">
                            <span><h6>出库详细理由:</h6></span>
                            <textarea class="form-control" rows="4" id="remark"
                                      style="background-color: white;height: 115px;border-color: #c7c7c7;resize:none" readonly></textarea>
                        </div>

                    </div>

                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>


    <div class="modal fade" id="myModal2">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="card-title">reviewProductionPlan</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="d1">
                        <div style="margin-top: 10px"><h2>出库单明细</h2>

                        </div>
                        <div class="container-fluid row" style="margin-top: 10px">
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">出库单编号<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control payId" style="background-color: white" readonly>
                            </div>

                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">产品编号<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="productId" style="background-color: white" readonly>
                            </div>
                        </div>

                        <div class="container-fluid row">
                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">产品名称<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="productName" style="background-color: white" readonly>
                            </div>

                            <div class="input-group mb-4 col">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">成本单价<span class="text-danger scale5 ms-2">*</span></span>
                                </div>
                                <input type="text" class="form-control" id="costPrice" style="background-color: white" readonly>
                            </div>
                        </div>

                        <div class="container-fluid row">
                            <table class="table table-bordered" style="text-align: center">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>库房名称</th>
                                    <th>存放地址编号</th>
                                    <th>出库时间</th>
                                    <th>本次出库数量</th>
                                    <th>本次出库成本（￥）</th>
                                </tr>
                                </thead>
                                <tbody id="tbodyModal1">


                                </tbody>
                            </table>
                        </div>
                    </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                </div>

            </div>
         </div>
        </div>
    </div>

</body>
</html>